<template>
    <div>

        <span>分类检索：</span>
        <el-select v-model="selectedCategoryId" placeholder="请选择商品分类">
            <el-option v-for="item in categoryTable" :label="item.categoryName" :value="item.categoryId"></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" style="position: relative;left: 10px;" @click="getFoodByCategory">搜索</el-button>

        <el-button type="text"  style="position: relative;left: 15px;" @click="exitSearch">退出搜索</el-button>

        <div style='float: right'>
            <el-button icon='el-icon-circle-plus-outline' @click='addFoodButton' size='small' type="success">添加菜品</el-button>
        </div>

    <div>
        <el-table
            :data="foodInfoTable"
            style="width: 100%"
            :border = 'border'
            stripe>
            <el-table-column
                type="index"
                width="80">
            </el-table-column>

            <el-table-column
                prop="foodName"
                label="菜品名"
                width="180">
            </el-table-column>

            <el-table-column
                prop="foodPrice"
                label="菜品价格"
                width="100">
            </el-table-column>

            <el-table-column
                prop="foodDescription"
                label="菜品描述"
                width="180"
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                prop="foodIcon"
                label="菜品图片"
                width="160">
                <template slot-scope="scope">
                    　　　　<img :src="scope.row.foodIcon"  width="50"/>
                    　　</template>
            </el-table-column>

            <el-table-column
                prop="categoryName"
                label="菜品类别"
                width="150">
            </el-table-column>

            <el-table-column
                label="菜品状态"
                width="120">
                <template slot-scope="scope">
                    <el-button @click='changeFoodStatus(scope.row)' size='mini' v-if='scope.row.foodStatus===true' type="success">上架中</el-button>
                    <el-button @click='changeFoodStatus(scope.row)'  size='mini' v-else type="info">已下架</el-button>
                </template>
            </el-table-column>

            <el-table-column
                    label="促销状态"
                    width="120">
                <template slot-scope="scope">
                    <el-button @click='changePromotion(scope.row)' size='mini' v-if='scope.row.promotion===true' type="danger">促销中</el-button>
                    <el-button @click='changePromotion(scope.row)'  size='mini' v-else type="info">未促销</el-button>
                </template>
            </el-table-column>

            <el-table-column
                fixed="right"
                label="操作"
                width="150">

                <template slot-scope="scope">

                    <el-button @click="editFoodMethod(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click='deleteFood(scope.row)' type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>



        <el-pagination
            background
            layout="prev, pager, next"
            @current-change='selectPage'
            :page-size='size'
            :total='total'>
        </el-pagination>


        <!-- Form -->

        <el-dialog :title="dialogTitle" :visible.sync="editFoodV">

            <el-card class="box-card">
                <el-form :model="editFoodF"   ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="菜品名" prop="name">
                        <el-input required='required' type='text' maxlength="32" show-word-limit v-model="editFoodF.foodName"></el-input>
                    </el-form-item>

                    <el-form-item label="菜品价格" prop="name">
                        <el-input-number v-model="editFoodF.foodPrice" :min="0" :max="10000000" :step='0.01' :controls="false" :precision="2"></el-input-number>
                    </el-form-item>

                    <el-form-item label="菜品描述" prop="name">
                        <el-input required='required' type='textarea' maxlength='128' show-word-limit v-model="editFoodF.foodDescription"></el-input>
                    </el-form-item>


                    <el-upload
                            style="margin-left: 100px;"
                            class="avatar-uploader"
                            action=""
                            :on-change="uploadImg"
                            :auto-upload="false"
                            :show-file-list="false">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                    <br>

                    <el-form-item label="菜品分类">
                        <el-select  v-model="editFoodF.categoryType" placeholder="请选择菜品类别">

                            <el-option v-for='item in categoryTable' :label='item.categoryName' :value="item.categoryId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFoodV = false">取 消</el-button>
                <el-button type="primary" @click='updateFoodInfo'>提 交</el-button>
            </div>
        </el-dialog>
    </div>

        <div style='float: right;margin-bottom:80px'>
            <el-link type="primary">数据总条数:{{total}}</el-link>
        </div>

    </div>
</template>

<script>
export default {
    data(){
        return{
            imageUrl: '',
            border: true,
            searching: false, //是否正在分类检索
            selectedCategoryId: null, //分类检索
            dialogTitle: '',
            editFoodF:{
                foodId: null,
                foodName: '',
                foodPrice: null,
                foodDescription: '',
                foodIcon: '',
                categoryType: null,
            },
            categoryTable:[], //菜品所有分类
            editFoodV: false, //修改菜品对话框
            total: 100, //总数
            size: 10, //没页数据条数
            foodInfoTable:[]
        }
    },
    created() {
        const _this = this;
        this.getFirstData();
        //获取所有分类
        this.$http.get('dev-api/seller/foodCategory/findAll')
            .then(function(resp){
                if (resp.data.code === 0){
                    _this.categoryTable = resp.data.data;
                }else{
                    _this.$message.error("获取失败")
                }
            })
            .catch(() => {
                _this.$message.error("获取失败")
            })

    },
    methods:{
        //获取第一页菜品信息
        getFirstData(){
            const _this = this;
            this.$http.get('dev-api/seller/foodInfo/list/1/10')
            .then(function(resp){
                if (resp.data.code === 0){
                    _this.foodInfoTable = resp.data.data.content;
                    _this.total = resp.data.data.total;
                    //console.log(_this.foodInfoTable)
                }else{
                    _this.$message.error(resp.data.msg);
                }
            })
        },

        //上架/下架菜品
        changeFoodStatus(row){

            console.log(row.foodId);
            let message = '' ;
            let a = '';
            if (row.foodStatus===true){
                a = '下架';
                message = '将被下架,是否继续?'
            }else{
                a = '上架';
                message = '将被上架,是否继续?'
            }
            const _this = this;
            this.$confirm('['+row.foodName+']'+message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$http.put('dev-api/seller/foodInfo/status/'+row.foodId)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.$message({
                                type: 'success',
                                message: a+'菜品['+row.foodName+']成功!'
                            });
                            row.foodStatus = !row.foodStatus;
                        }else{
                            _this.$message({
                                type: 'error',
                                message: resp.data.msg
                            });
                        }
                    })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        changePromotion(row){
            console.log(row.foodId);
            let message = '' ;
            let a = '';
            if (row.promotion===true){
                a = '结束促销';
                message = '将结束促销,是否继续?'
            }else{
                a = '促销';
                message = '将开始促销,是否继续?'
            }
            const _this = this;
            this.$confirm('['+row.foodName+']'+message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$http.put('dev-api/seller/foodInfo/promotion/'+row.foodId)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.$message({
                                type: 'success',
                                message: a+'菜品['+row.foodName+']成功!'
                            });
                            row.promotion = !row.promotion;
                        }else{
                            _this.$message({
                                type: 'error',
                                message: resp.data.msg
                            });
                        }
                    })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        //删除菜品
        deleteFood(row){

            const _this = this;
            this.$confirm('删除菜品['+row.foodName+'], 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$http.delete('dev-api/seller/foodInfo/delete/'+row.foodId)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            //刷新数据
                            _this.getFirstData();
                            _this.$message({
                                type: 'success',
                                message: '删除菜品['+row.foodName+']成功!'
                            });
                        }else{
                            _this.$message({
                                type: 'error',
                                message: resp.data.msg
                            });
                        }
                    })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //查询某一页数据
        //判断searching来确定此时是全部菜品查看还是分类检索
        selectPage(currentPage){
            const _this = this;
            if (this.searching === true){  //分类检索

                this.$http.get('dev-api/seller/foodInfo/findAllByCategory/'+_this.selectedCategoryId+'/'+currentPage+'/10')
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.foodInfoTable = resp.data.data.content;
                            _this.total = resp.data.data.total;
                            //console.log(_this.foodInfoTable)
                        }else{
                            _this.$message.error(resp.data.msg);
                        }
                    })

            }else {  //全部查看
                this.$http.get('dev-api/seller/foodInfo/list/'+currentPage+'/10')
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.foodInfoTable = resp.data.data.content;
                            _this.total = resp.data.data.total;
                            //console.log(_this.foodInfoTable)
                        }else{
                            _this.$message.error(resp.data.msg);
                        }
                    })
            }

        },
        //修改菜品信息
        editFoodMethod(row){
            this.dialogTitle = '修改菜品信息';
            this.editFoodF.foodId = row.foodId;
            this.editFoodF.foodName = row.foodName;
            this.editFoodF.foodPrice = row.foodPrice;
            this.editFoodF.foodDescription = row.foodDescription;
            this.editFoodF.foodIcon = row.foodIcon;
            //设置显示图片
            this.imageUrl = row.foodIcon;
            this.editFoodF.categoryType = row.categoryType;

            this.editFoodV = true;
        },
        //后端更新菜品信息,或者添加菜品
        updateFoodInfo(){
            let msg = '';
            if (this.dialogTitle === '修改菜品信息'){
                msg = '修改菜品信息成功';
            }else {
                msg = '添加菜品成功';
            }
            const _this = this;
            this.$http.post('dev-api/seller/foodInfo/saveOrUpdate',_this.editFoodF)
            .then(function(resp){
                if (resp.data.code === 0){
                    //重新获取菜品列表，刷新界面
                    _this.getFirstData();
                    _this.$message.success(msg);
                    _this.editFoodV = false;
                }else{
                    _this.$message.error(resp.data.msg);
                }
            })
                .catch(() => {
                    _this.$message.error("获取失败")
                })
        },

        //添加菜品,打开对话框
        addFoodButton(){
            this.imageUrl = '';
            this.dialogTitle = '添加菜品';
            this.editFoodF.foodId = null;
            this.editFoodF.foodName = '';
            this.editFoodF.foodPrice = null;
            this.editFoodF.foodDescription = '';
            this.editFoodF.foodIcon = '';
            this.editFoodF.categoryType = null;

            this.editFoodV = true;
        },
        //分类查看菜品
        getFoodByCategory(){
            if (this.selectedCategoryId !== null){
                this.searching = true;//设置状态检索中
                console.log(this.selectedCategoryId)
                const _this = this;
                this.$http.get('dev-api/seller/foodInfo/findAllByCategory/'+_this.selectedCategoryId+'/1/10')
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.$message.success("成功检索到数据")
                            _this.foodInfoTable = resp.data.data.content;
                            _this.total = resp.data.data.total;
                            //console.log(_this.foodInfoTable)
                        }else{
                            _this.$message.error(resp.data.msg);
                        }
                    })
            }else {
                this.$message.error("请先选择检索类别")
            }



        },
        //退出搜索
        exitSearch(){
            this.searching = false;
            this.selectedCategoryId = null;
            this.getFirstData();
            this.$message.success("已退出搜索，现在为全部菜品")
        },
        uploadImg(file, fileList) {

            const _this = this;
            let fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
            if (fileType !== 'jpg' && fileType !== 'png' && fileType !== 'jpeg'){
                this.$message.error('头像格式不正确')
                return false;
            }
            if (file.size/1024/1024 > 2){
                this.$message.error('头像大小不能大于2M')
                return false;
            }
            console.log(file, fileList)
            let formdata = new FormData()
            formdata.append("file", file.raw)

            this.$http.post('img-serve/img/upload',formdata)
                .then(function (resp) {
                    if (resp.data.code === 0){
                        _this.$message.success('上传成功')
                        _this.imageUrl =  resp.data.data;
                        _this.editFoodF.foodIcon = resp.data.data;
                        console.log(_this.editFoodF.foodIcon)
                    }else{
                        _this.$message.error('上传失败')
                    }
                })

        },
        exceedM(files, fileList){
            this.$message.error('只能上传一张图片')
        }

    }
}
</script>
<style scoped>
    .avatar-uploader{
        /*border: 1px dashed #d9d9d9;*/
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader :hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {

        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>